<template>
  <div class="textModleQuestion">
    <div v-for="(item, index) in questionArry" :key="index">
      <div
        class="contantInfo"
        style="display: block"
        v-if="currentIndex == index"
      >
        <div class="duoxuan_title">
          <div class="shicaoti">
            {{ index + 1 }}、 <span>{{ item.questionType }}(实操题)</span> :{{
              item.questionName
            }}
          </div>
        </div>
        <button class="goback" @click="goback()">返回</button>
        <div class="shadow" v-if="showCountFlag">
          开始答题倒计时：
          <div style="color: #ffffff; font-size: 100px">{{ count }}</div>
        </div>
        <video
          style="margin: 60px 0 0px 0"
          v-if="videoArr"
          :src="videoArr"
          width="100%"
          height="500"
          controls
          autoplay
          loop
        ></video>
        <div
          :class="questionType0 ? 'selectWay2' : 'selectWay'"
          v-if="questionState"
        >
          <button @click="lookVideo(item.id)">观看教学视频</button>
          <button @click="againRest()">再试一遍</button>
          <button
            v-if="currentIndex < questionArry.length - 1"
            @click="nextQuestion(index)"
          >
            下一题
          </button>
        </div>
      </div>
    </div>
    <div class="studentInfo_contant">
      <img
        class="headerImg"
        :src="'data:image/jpeg;base64,' + textStudentInfo.signInImage"
        alt=""
      />
      <ul class="studentInfo">
        <li>
          <div>
            姓名：<span>{{ textStudentInfo.name }}</span>
          </div>
          <div>
            性别：<span>{{
              textStudentInfo.idCard
                ? parseInt(textStudentInfo.idCard.slice(-2, -1)) % 2 === 1
                  ? "男"
                  : "女"
                : "未知"
            }}</span>
          </div>
          <div>
            考试项目：<span>{{ textStudentInfo.projectWork }}</span>
          </div>
          <div>
            项目代号：<span>{{ textStudentInfo.projectCode }}</span>
          </div>
          <div>
            身份证号：<span>{{ textStudentInfo.idCard }}</span>
          </div>
          <div>
            考试时间：<span>{{ textStudentInfo.examDate }}</span>
          </div>
        </li>
      </ul>
    </div>
    <VideoRtsp
      style="
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
      "
      v-if="questionType0"
    ></VideoRtsp>
  </div>
</template>
  
  <script>
import VideoRtsp from "../../components/textVideo.vue";
import $api from "../../untils/api";
import SpeakTts from "speak-tts";
import { mapState } from "vuex";
export default {
  name: "textModleQuestion",
  data() {
    return {
      tts: new SpeakTts(),
      actionNumberArr: [],
      actionNum: 0,
      questionArry: [],
      currentIndex: 0, //题目类型分类
      showCountFlag: true,
      count: 3,
      recordIndex: null,
      videoArr: "", //教学视频url
      questionState: false, //题目正确与否
      questionType0: true,
    };
  },
  components: {
    VideoRtsp,
  },
  props: {},
  computed: {
    ...mapState(["examineeId", "textStudentInfo"]),
  },
  created() {
    let result = JSON.parse(localStorage.getItem("ActionQuestions"));
    result.forEach((item) => {
      if (item.type === "0") {
        this.questionArry.push(item);
      }
    });

    this.questionArry.filter((item) => {
      item.type == "0" ? this.actionNumberArr.push(item.actionNumber) : "";
    });

    this.tts.speak({
      text: "接下来进行起重吊运指挥信号的应用实操考试，考生需在十秒内根据题目做出正确动作，每题倒计时三秒后开始，请考生做好准备。",
      queue: false,
      listeners: {
        onend: () => {
          this.a(0);
          // 可以在mounted钩子中初始化相机，如果需要的话
        },
      },
    });
    this.id = this.$route.params.id;
  },
  mounted() {},
  methods: {
    lookVideo(id) {
      this.questionType0 = false;
      switch (id) {
        case 513:
          this.videoArr = "/api" + "/profile/video/操作开始（准备）.mp4";
          break;
        case 514:
          this.videoArr = "/api" + "/profile/video/停止（正常停止）.mp4";
          break;
        case 515:
          this.videoArr = "/api" + "/profile/video/紧急停止（快速停止）.mp4";
          break;
        case 516:
          this.videoArr = "/api" + "/profile/video/结束指令.mp4";
          break;
        case 517:
          this.videoArr = "/api" + "/profile/video/平稳或精确的减速.mp4";
          break;
        case 518:
          this.videoArr = "/api" + "/profile/video/指示垂直距离.mp4";
          break;
        case 519:
          this.videoArr = "/api" + "/profile/video/匀速起升.mp4";
          break;
        case 520:
          this.videoArr = "/api" + "/profile/video/慢速起升.mp4";
          break;
        case 521:
          this.videoArr = "/api" + "/profile/video/匀速下降.mp4";
          break;
        case 522:
          this.videoArr = "/api" + "/profile/video/慢速下降.mp4";
          break;
        case 523:
          this.videoArr = "/api" + "/profile/video/指定方向的运行(回转).mp4";
          break;
        case 524:
          this.videoArr = "/api" + "/profile/video/驶离指挥人员.mp4";
          break;
        case 525:
          this.videoArr = "/api" + "/profile/video/驶向指挥人员.mp4";
          break;
        case 526:
          this.videoArr = "/api" + "/profile/video/两个履带的运行.mp4";
          break;
        case 527:
          this.videoArr = "/api" + "/profile/video/单个履带的运行.mp4";
          break;
        case 528:
          this.videoArr = "/api" + "/profile/video/指示水平距离.mp4";
          break;
        case 529:
          this.videoArr =
            "/api" + "/profile/video/翻转（通过两个起重机或两个吊钩）.mp4";
          break;
        case 530:
          this.videoArr = "/api" + "/profile/video/主起升机构.mp4";
          break;
        case 531:
          this.videoArr = "/api" + "/profile/video/副起升机构.mp4";
          break;
        case 532:
          this.videoArr = "/api" + "/profile/video/臂架起升.mp4";
          break;
        case 533:
          this.videoArr = "/api" + "/profile/video/臂架下降.mp4";
          break;
        case 534:
          this.videoArr = "/api" + "/profile/video/臂架外伸或小车向外运行.mp4";
          break;
        case 535:
          this.videoArr = "/api" + "/profile/video/臂架收回或小车向内运行.mp4";
          break;
        case 536:
          this.videoArr = "/api" + "/profile/video/载荷下降时臂架起升.mp4";
          break;
        case 537:
          this.videoArr = "/api" + "/profile/video/载荷起升时臂架下降.mp4";
          break;
        case 538:
          this.videoArr = "/api" + "/profile/video/抓斗张开.mp4";
          break;
        case 539:
          this.videoArr = "/api" + "/profile/video/抓斗关闭.mp4";
          break;
      }
    },
    againRest() {
      this.questionType0 = true;
      this.videoArr = "";
      this.questionState = false;
      this.count = 3;
      this.showCountFlag = true;
      this.a(this.recordIndex);
    },
    nextQuestion(index) {
      if (Number(this.currentIndex + 1) >= Number(this.questionArry.length)) {
        this.$message.error("已经是最后一题");
      } else {
        this.currentIndex += 1;
        this.count = 3;
        this.actionNum += 1;
        this.videoArr = "";
        this.showCountFlag = true;
        this.questionState = false;
        this.questionType0 = true;
        this.a(this.currentIndex);
      }
    },
    a(index) {
      let question = this.questionArry[index];
      this.tts.speak({
        text: question.questionName,
        queue: false,
        listeners: {
          onend: () => {},
        },
      });
      const intervalId = setInterval(() => {
        this.count--;
        if (this.count <= 0) {
          clearInterval(intervalId);
          this.showCountFlag = false;

          const data = {
            mode: "detect",
            poseid_list: this.actionNumberArr,
            poseid: this.actionNumberArr[this.actionNum],
          };

          $api
            .pose(data)
            .then((res) => {
              this.recordIndex = index;
              if (res.data.info.length < 6) {
                if (
                  Number(this.currentIndex + 1) >=
                    Number(this.questionArry.length) &&
                  res.data.message == "success"
                ) {
                  this.tts.speak({
                    text: "测试结束",
                    queue: false,
                    listeners: {
                      onend: () => {},
                    },
                  });
                  this.questionState = false;
                  return;
                }
                switch (res.data.info) {
                  case "0":
                    this.questionState = true;
                    this.tts.speak({
                      text: "动作错误，请重新操作。",
                      queue: false,
                    });
                    this.$message.error("指挥动作错误");

                    break;
                  case "1":
                    if (
                      Number(this.currentIndex + 1) >
                      Number(this.questionArry.length)
                    ) {
                      return;
                    } else {
                      this.questionState = false;
                      this.currentIndex += 1;
                      this.count = 3;
                      this.actionNum += 1;
                      this.showCountFlag = true;
                      this.a(this.currentIndex);
                    }
                    break;
                }
              } else {
                // this.a(this.currentIndex);
              }
            })
            .catch((err) => {
              // console.log(err, "err");
            });
        }
      }, 1000);
    },
    handleFun() {},
    goback() {
      this.videoArr = "";
      this.$router.push({
        name: "textModel",
        params: {
          examineeId: this.id,
        },
      });
      this.tts.pause(); //暂停
      this.tts.cancel(); // 移除所有语音谈话队列中的谈话
      this.tts = null;
    },
  },
};
</script>
  
  <style  scoped>
@import url(../../style/shiCaoCeShi.scss);
</style>
  